<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户积分管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 登录页面样式 */
        .login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }
        
        .login-form {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
        }
        
        .login-form h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .login-btn {
            width: 100%;
            padding: 12px;
            background: #6a11cb;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .login-btn:hover {
            background: #5a0db3;
        }
        
        /* 主应用样式 */
        .app-container {
            display: none;
            min-height: 100vh;
            padding-bottom: 70px;
        }
        
        header {
            background: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #6a11cb;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logout-btn {
            background: #ff4757;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        
        /* 页面内容样式 */
        .page {
            display: none;
            margin-top: 20px;
        }
        
        .page.active {
            display: block;
        }
        
        /* 首页样式 */
        .welcome-section {
            background: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .welcome-section h1 {
            color: #6a11cb;
            margin-bottom: 15px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        
        .stat-card i {
            font-size: 40px;
            color: #6a11cb;
            margin-bottom: 15px;
        }
        
        .stat-card h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .promo-section {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .promo-section h2 {
            margin-bottom: 20px;
            color: #6a11cb;
        }
        
        .promo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .promo-item {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        
        .promo-item .image-placeholder {
            height: 120px;
            background: #e9ecef;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            color: #6c757d;
        }
        
        /* 商城样式 */
        .category-filter {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .category-btn {
            padding: 8px 15px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .category-btn.active {
            background: #6a11cb;
            color: white;
            border-color: #6a11cb;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            height: 180px;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-info h3 {
            margin-bottom: 10px;
        }
        
        .product-price {
            color: #6a11cb;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 15px;
        }
        
        .exchange-btn {
            width: 100%;
            padding: 10px;
            background: #6a11cb;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .exchange-btn:hover {
            background: #5a0db3;
        }
        
        /* 用户信息样式 */
        .profile-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        
        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            color: #6c757d;
        }
        
        .profile-info h2 {
            margin-bottom: 5px;
        }
        
        .points-display {
            font-size: 24px;
            color: #6a11cb;
            font-weight: bold;
        }
        
        .address-section, .orders-section {
            margin-top: 30px;
        }
        
        .section-title {
            margin-bottom: 15px;
            color: #6a11cb;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .address-list {
            margin-bottom: 20px;
        }
        
        .address-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .address-actions {
            display: flex;
            gap: 10px;
        }
        
        .edit-btn, .delete-btn, .add-btn {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .edit-btn {
            background: #3498db;
            color: white;
        }
        
        .delete-btn {
            background: #ff4757;
            color: white;
        }
        
        .add-btn {
            background: #2ed573;
            color: white;
        }
        
        .order-list {
            display: grid;
            gap: 15px;
        }
        
        .order-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-status {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .status-pending {
            background: #ffeaa7;
            color: #e17055;
        }
        
        .status-shipped {
            background: #55efc4;
            color: #00b894;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: #666;
            transition: color 0.3s;
        }
        
        .nav-item.active {
            color: #6a11cb;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .confirm-btn, .cancel-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .confirm-btn {
            background: #6a11cb;
            color: white;
        }
        
        .cancel-btn {
            background: #ddd;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .login-form {
                padding: 20px;
            }
            
            .stats-cards {
                grid-template-columns: 1fr;
            }
            
            .products-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div class="login-container" id="loginPage">
        <div class="login-form">
            <h2>用户登录</h2>
            <div class="form-group">
                <label for="username">账号</label>
                <input type="text" id="username" placeholder="请输入账号">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <button class="login-btn" id="loginBtn">登录</button>
        </div>
    </div>
    
    <!-- 主应用 -->
    <div class="app-container" id="appContainer">
        <header>
            <div class="container header-content">
                <div class="logo">积分商城</div>
                <div class="user-info">
                    <span id="currentUser">用户</span>
                    <button class="logout-btn" id="logoutBtn">退出登录</button>
                </div>
            </div>
        </header>
        
        <div class="container">
            <!-- 首页 -->
            <div class="page active" id="homePage">
                <div class="welcome-section">
                    <h1>欢迎来到积分商城</h1>
                    <p>使用您的积分兑换精美商品，享受专属优惠！</p>
                </div>
                
                <div class="stats-cards">
                    <div class="stat-card">
                        <i class="fas fa-gift"></i>
                        <h3 id="userPoints">0</h3>
                        <p>当前积分</p>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-shopping-cart"></i>
                        <h3 id="pendingOrders">0</h3>
                        <p>待发货订单</p>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-truck"></i>
                        <h3 id="shippedOrders">0</h3>
                        <p>已发货订单</p>
                    </div>
                </div>
                
                <div class="promo-section">
                    <h2>热门活动</h2>
                    <div class="promo-grid">
                        <div class="promo-item">
                            <div class="image-placeholder">活动图片位置</div>
                            <h4>双倍积分周</h4>
                            <p>本周所有消费双倍积分</p>
                        </div>
                        <div class="promo-item">
                            <div class="image-placeholder">活动图片位置</div>
                            <h4>新品上线</h4>
                            <p>多款新品上架兑换</p>
                        </div>
                        <div class="promo-item">
                            <div class="image-placeholder">活动图片位置</div>
                            <h4>限时特惠</h4>
                            <p>部分商品限时折扣</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 兑换商城 -->
            <div class="page" id="shopPage">
                <h2>积分商城</h2>
                <div class="category-filter">
                    <button class="category-btn active" data-category="all">全部商品</button>
                    <button class="category-btn" data-category="electronics">电子产品</button>
                    <button class="category-btn" data-category="home">家居用品</button>
                    <button class="category-btn" data-category="clothing">服装配饰</button>
                </div>
                
                <div class="products-grid" id="productsGrid">
                    <!-- 商品将通过JavaScript动态生成 -->
                </div>
            </div>
            
            <!-- 用户信息 -->
            <div class="page" id="profilePage">
                <div class="profile-card">
                    <div class="profile-header">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="profile-info">
                            <h2 id="profileUsername">用户名</h2>
                            <div class="points-display" id="profilePoints">0 积分</div>
                        </div>
                    </div>
                    
                    <div class="address-section">
                        <h3 class="section-title">收货地址</h3>
                        <div class="address-list" id="addressList">
                            <!-- 地址将通过JavaScript动态生成 -->
                        </div>
                        <button class="add-btn" id="addAddressBtn">添加新地址</button>
                    </div>
                    
                    <div class="orders-section">
                        <h3 class="section-title">待发货订单</h3>
                        <div class="order-list" id="pendingOrdersList">
                            <!-- 待发货订单将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <div class="orders-section">
                        <h3 class="section-title">已发货订单</h3>
                        <div class="order-list" id="shippedOrdersList">
                            <!-- 已发货订单将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" data-page="homePage">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="nav-item" data-page="shopPage">
                <i class="fas fa-shopping-bag"></i>
                <span>兑换商城</span>
            </div>
            <div class="nav-item" data-page="profilePage">
                <i class="fas fa-user"></i>
                <span>用户信息</span>
            </div>
        </div>
    </div>
    
    <!-- 兑换确认模态框 -->
    <div class="modal" id="exchangeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>确认兑换</h3>
                <button class="close-btn" id="closeExchangeModal">&times;</button>
            </div>
            <p>您确定要兑换 <span id="exchangeProductName"></span> 吗？</p>
            <p>需要消耗 <span id="exchangeProductPoints"></span> 积分。</p>
            <div class="modal-footer">
                <button class="cancel-btn" id="cancelExchange">取消</button>
                <button class="confirm-btn" id="confirmExchange">确认兑换</button>
            </div>
        </div>
    </div>
    
    <!-- 地址编辑模态框 -->
    <div class="modal" id="addressModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="addressModalTitle">添加地址</h3>
                <button class="close-btn" id="closeAddressModal">&times;</button>
            </div>
            <div class="form-group">
                <label for="addressInput">详细地址</label>
                <input type="text" id="addressInput" placeholder="请输入详细地址">
            </div>
            <div class="modal-footer">
                <button class="cancel-btn" id="cancelAddress">取消</button>
                <button class="confirm-btn" id="saveAddress">保存</button>
            </div>
        </div>
    </div>

    <script>
        // 初始用户数据（模拟数据库）
        let users = JSON.parse(localStorage.getItem('users')) || [
            {
                username: 'admin',
                password: '123456',
                points: 1500,
                addresses: ['北京市朝阳区xxx街道xxx号'],
                pendingOrders: ['智能手表'],
                shippedOrders: ['蓝牙耳机', '保温杯']
            },
            {
                username: 'user1',
                password: '123456',
                points: 800,
                addresses: ['上海市浦东新区xxx路xxx号'],
                pendingOrders: [],
                shippedOrders: ['充电宝']
            }
        ];
        
        // 初始商品数据
        let products = JSON.parse(localStorage.getItem('products')) || [
            { id: 1, name: '智能手表', category: 'electronics', points: 500, image: 'product1.jpg' },
            { id: 2, name: '蓝牙耳机', category: 'electronics', points: 300, image: 'product2.jpg' },
            { id: 3, name: '保温杯', category: 'home', points: 150, image: 'product3.jpg' },
            { id: 4, name: '充电宝', category: 'electronics', points: 200, image: 'product4.jpg' },
            { id: 5, name: 'T恤', category: 'clothing', points: 100, image: 'product5.jpg' },
            { id: 6, name: '抱枕', category: 'home', points: 80, image: 'product6.jpg' }
        ];
        
        // 当前登录用户
        let currentUser = null;
        
        // DOM 元素
        const loginPage = document.getElementById('loginPage');
        const appContainer = document.getElementById('appContainer');
        const loginBtn = document.getElementById('loginBtn');
        const logoutBtn = document.getElementById('logoutBtn');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const currentUserSpan = document.getElementById('currentUser');
        const userPointsSpan = document.getElementById('userPoints');
        const profileUsernameSpan = document.getElementById('profileUsername');
        const profilePointsSpan = document.getElementById('profilePoints');
        const pendingOrdersCount = document.getElementById('pendingOrders');
        const shippedOrdersCount = document.getElementById('shippedOrders');
        const productsGrid = document.getElementById('productsGrid');
        const addressList = document.getElementById('addressList');
        const pendingOrdersList = document.getElementById('pendingOrdersList');
        const shippedOrdersList = document.getElementById('shippedOrdersList');
        const navItems = document.querySelectorAll('.nav-item');
        const pages = document.querySelectorAll('.page');
        const categoryBtns = document.querySelectorAll('.category-btn');
        const exchangeModal = document.getElementById('exchangeModal');
        const addressModal = document.getElementById('addressModal');
        const exchangeProductName = document.getElementById('exchangeProductName');
        const exchangeProductPoints = document.getElementById('exchangeProductPoints');
        const confirmExchangeBtn = document.getElementById('confirmExchange');
        const cancelExchangeBtn = document.getElementById('cancelExchange');
        const closeExchangeModal = document.getElementById('closeExchangeModal');
        const addAddressBtn = document.getElementById('addAddressBtn');
        const saveAddressBtn = document.getElementById('saveAddress');
        const cancelAddressBtn = document.getElementById('cancelAddress');
        const closeAddressModal = document.getElementById('closeAddressModal');
        const addressInput = document.getElementById('addressInput');
        const addressModalTitle = document.getElementById('addressModalTitle');
        
        // 当前选中的商品和地址索引
        let selectedProduct = null;
        let editingAddressIndex = -1;
        
        // 初始化
        function init() {
            // 保存初始数据到本地存储
            localStorage.setItem('users', JSON.stringify(users));
            localStorage.setItem('products', JSON.stringify(products));
            
            // 绑定事件监听器
            loginBtn.addEventListener('click', handleLogin);
            logoutBtn.addEventListener('click', handleLogout);
            
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    const pageId = item.getAttribute('data-page');
                    switchPage(pageId);
                    
                    navItems.forEach(nav => nav.classList.remove('active'));
                    item.classList.add('active');
                });
            });
            
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const category = btn.getAttribute('data-category');
                    filterProducts(category);
                    
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                });
            });
            
            confirmExchangeBtn.addEventListener('click', handleExchange);
            cancelExchangeBtn.addEventListener('click', () => exchangeModal.style.display = 'none');
            closeExchangeModal.addEventListener('click', () => exchangeModal.style.display = 'none');
            
            addAddressBtn.addEventListener('click', () => openAddressModal());
            saveAddressBtn.addEventListener('click', saveAddress);
            cancelAddressBtn.addEventListener('click', () => addressModal.style.display = 'none');
            closeAddressModal.addEventListener('click', () => addressModal.style.display = 'none');
            
            // 初始显示登录页面
            loginPage.style.display = 'flex';
            appContainer.style.display = 'none';
        }
        
        // 登录处理
        function handleLogin() {
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();
            
            if (!username || !password) {
                alert('请输入账号和密码');
                return;
            }
            
            const user = users.find(u => u.username === username && u.password === password);
            
            if (user) {
                currentUser = user;
                currentUserSpan.textContent = user.username;
                userPointsSpan.textContent = user.points;
                profileUsernameSpan.textContent = user.username;
                profilePointsSpan.textContent = `${user.points} 积分`;
                pendingOrdersCount.textContent = user.pendingOrders.length;
                shippedOrdersCount.textContent = user.shippedOrders.length;
                
                // 切换到主应用
                loginPage.style.display = 'none';
                appContainer.style.display = 'block';
                
                // 更新用户界面
                updateUserInterface();
            } else {
                alert('账号或密码错误');
            }
        }
        
        // 退出登录
        function handleLogout() {
            currentUser = null;
            usernameInput.value = '';
            passwordInput.value = '';
            
            // 切换回登录页面
            loginPage.style.display = 'flex';
            appContainer.style.display = 'none';
        }
        
        // 切换页面
        function switchPage(pageId) {
            pages.forEach(page => {
                page.classList.remove('active');
                if (page.id === pageId) {
                    page.classList.add('active');
                }
            });
            
            // 如果是商城页面，加载商品
            if (pageId === 'shopPage') {
                loadProducts('all');
            }
        }
        
        // 加载商品
        function loadProducts(category) {
            productsGrid.innerHTML = '';
            
            const filteredProducts = category === 'all' 
                ? products 
                : products.filter(p => p.category === category);
            
            filteredProducts.forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card';
                productCard.innerHTML = `
                    <div class="product-image">
                        商品图片位置 (${product.image})
                    </div>
                    <div class="product-info">
                        <h3>${product.name}</h3>
                        <div class="product-price">${product.points} 积分</div>
                        <button class="exchange-btn" data-id="${product.id}">兑换</button>
                    </div>
                `;
                productsGrid.appendChild(productCard);
            });
            
            // 绑定兑换按钮事件
            document.querySelectorAll('.exchange-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const productId = parseInt(btn.getAttribute('data-id'));
                    selectedProduct = products.find(p => p.id === productId);
                    
                    if (selectedProduct) {
                        exchangeProductName.textContent = selectedProduct.name;
                        exchangeProductPoints.textContent = selectedProduct.points;
                        exchangeModal.style.display = 'flex';
                    }
                });
            });
        }
        
        // 筛选商品
        function filterProducts(category) {
            loadProducts(category);
        }
        
        // 处理兑换
        function handleExchange() {
            if (!selectedProduct || !currentUser) return;
            
            if (currentUser.points < selectedProduct.points) {
                alert('积分不足，无法兑换该商品');
                exchangeModal.style.display = 'none';
                return;
            }
            
            // 扣除积分
            currentUser.points -= selectedProduct.points;
            
            // 添加到待发货订单
            currentUser.pendingOrders.push(selectedProduct.name);
            
            // 更新本地存储
            const userIndex = users.findIndex(u => u.username === currentUser.username);
            if (userIndex !== -1) {
                users[userIndex] = currentUser;
                localStorage.setItem('users', JSON.stringify(users));
            }
            
            // 更新界面
            updateUserInterface();
            
            alert(`成功兑换 ${selectedProduct.name}！`);
            exchangeModal.style.display = 'none';
        }
        
        // 打开地址模态框
        function openAddressModal(index = -1) {
            editingAddressIndex = index;
            
            if (index === -1) {
                // 添加新地址
                addressModalTitle.textContent = '添加地址';
                addressInput.value = '';
            } else {
                // 编辑现有地址
                addressModalTitle.textContent = '编辑地址';
                addressInput.value = currentUser.addresses[index];
            }
            
            addressModal.style.display = 'flex';
        }
        
        // 保存地址
        function saveAddress() {
            const address = addressInput.value.trim();
            
            if (!address) {
                alert('请输入地址');
                return;
            }
            
            if (editingAddressIndex === -1) {
                // 添加新地址
                currentUser.addresses.push(address);
            } else {
                // 更新现有地址
                currentUser.addresses[editingAddressIndex] = address;
            }
            
            // 更新本地存储
            const userIndex = users.findIndex(u => u.username === currentUser.username);
            if (userIndex !== -1) {
                users[userIndex] = currentUser;
                localStorage.setItem('users', JSON.stringify(users));
            }
            
            // 更新界面
            updateUserInterface();
            
            addressModal.style.display = 'none';
        }
        
        // 删除地址
        function deleteAddress(index) {
            if (confirm('确定要删除这个地址吗？')) {
                currentUser.addresses.splice(index, 1);
                
                // 更新本地存储
                const userIndex = users.findIndex(u => u.username === currentUser.username);
                if (userIndex !== -1) {
                    users[userIndex] = currentUser;
                    localStorage.setItem('users', JSON.stringify(users));
                }
                
                // 更新界面
                updateUserInterface();
            }
        }
        
        // 更新用户界面
        function updateUserInterface() {
            if (!currentUser) return;
            
            // 更新积分显示
            userPointsSpan.textContent = currentUser.points;
            profilePointsSpan.textContent = `${currentUser.points} 积分`;
            
            // 更新订单数量
            pendingOrdersCount.textContent = currentUser.pendingOrders.length;
            shippedOrdersCount.textContent = currentUser.shippedOrders.length;
            
            // 更新地址列表
            addressList.innerHTML = '';
            currentUser.addresses.forEach((address, index) => {
                const addressItem = document.createElement('div');
                addressItem.className = 'address-item';
                addressItem.innerHTML = `
                    <div>${address}</div>
                    <div class="address-actions">
                        <button class="edit-btn" data-index="${index}">编辑</button>
                        <button class="delete-btn" data-index="${index}">删除</button>
                    </div>
                `;
                addressList.appendChild(addressItem);
            });
            
            // 绑定地址操作按钮事件
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const index = parseInt(btn.getAttribute('data-index'));
                    openAddressModal(index);
                });
            });
            
            document.querySelectorAll('.delete-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const index = parseInt(btn.getAttribute('data-index'));
                    deleteAddress(index);
                });
            });
            
            // 更新待发货订单列表
            pendingOrdersList.innerHTML = '';
            currentUser.pendingOrders.forEach(order => {
                const orderItem = document.createElement('div');
                orderItem.className = 'order-item';
                orderItem.innerHTML = `
                    <div>${order}</div>
                    <div class="order-status status-pending">待发货</div>
                `;
                pendingOrdersList.appendChild(orderItem);
            });
            
            // 更新已发货订单列表
            shippedOrdersList.innerHTML = '';
            currentUser.shippedOrders.forEach(order => {
                const orderItem = document.createElement('div');
                orderItem.className = 'order-item';
                orderItem.innerHTML = `
                    <div>${order}</div>
                    <div class="order-status status-shipped">已发货</div>
                `;
                shippedOrdersList.appendChild(orderItem);
            });
        }
        
        // 初始化应用
        init();
    </script>
</body>
</html>